<template>
  <van-sticky>
    <van-nav-bar title="个人中心" right-text="编辑" @click-right="onClickRight" @click="toPersonalEdit" />
  </van-sticky>
  <div class="cover">
    <van-image round width="100" height="100" fit="cover" position="contain top"
      src="https://unpkg.com/@vant/assets/cat.jpeg" />
  </div>
  <van-cell title="用户名" is-link :value="user.userName" />
  <van-cell title="性别" is-link :value="user.userGender" />
  <van-cell title="生日" is-link :value="user.userBirthday" />
  <van-cell title="手机号" is-link :value="user.userTel" />
  <van-cell title="邮箱" is-link :value="user.userEmail" />
  <van-cell title="地址" is-link value="宁夏银川市宁夏大学文萃校区" />
  <van-cell title="配送地址" is-link  @click="toAddress"/>
  <!--底部-->
  <div style="margin-top: 40px">
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" @click="$router.push('/')">首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="$router.push('/search')">搜索</van-tabbar-item>
      <van-tabbar-item icon="bill" @click="$router.push('/order')">订单</van-tabbar-item>
      <van-tabbar-item icon="manager-o" @click="$router.push('/user')">我的</van-tabbar-item>
    </van-tabbar>
  </div>

</template>


<script setup>
import { useRouter } from 'vue-router';
import { ref, reactive } from 'vue';
import http from "@/utils/request.js";
import { deepCopy } from '@/utils/object.js';
import { getHeadImageUrl } from '@/utils/api.js'
const props = defineProps(['id'])
const active = ref(3);
const router = useRouter();
//点击"编辑"，跳转到个人信息修改页面
const onClickRight = function (userId) {
  router.push({ name: 'edit', params: { id: userId } })
}
const user = reactive([

])

const getUser = function () {
  http.get(
    '/user'
  ).then((res) => {//
    console.log("获取到的用户信息：", res.data);
    deepCopy(user, res.data.data);
    // personalList.splice(0);//todo 需要将原有的元素清空
    //遍历每一个元素
  })
}

//点击配送地址，传用户id过去
const toAddress =function (){
  router.push('/address/'+user.userId);
}

getUser();
</script>

<style scoped lang="scss">
@import "../style/mixins.scss";
@import "../style/viriables.scss";

.cover {
  background-color: #FFD700;
  padding: 50px;
  text-align: center;
}

.van-nav-bar {
  background-color: #FFD700;
}

/*底部 */
/*默认选中首页时，首页图标显示蓝色*/
.docker-item-active {
  color: #38a038;
}

.docker {
  display: flex;
  width: 100%;
  height: 49px;
  border-top: 1px solid #ccc;
  position: absolute;
  bottom: 0px;

  &-item {
    flex: 1;
    text-align: center;

    .iconfont {
      margin: 5px 0 1px 0;
      font-size: 15px;
    }

    &-title {
      font-size: 15px;
      transform: scale(0.5, 0.5);
      transform-origin: center top;
    }
  }
}
</style>
